<template>
  <div class="info-bar">
    <div class="info-item"><span>@用户名</span></div>
    <div class="info-item"><span>vuecli4实现抖音app</span></div>
    <div class="info-item"><span>描述</span></div>
    <div class="info-item music-item">
      <span class="iconfont icon-yinfu"></span>
      <div class="music-name">
          <span data-text="@用户名创作的原声">@用户名创作的原声</span>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .info-item .icon-yinfu{
    margin-right: 3px;
  }
  .music-item{
    display: flex;
  }
  .music-name{
    width: 175px;
    /* border: 1px solid #000; */
    white-space: nowrap;
    overflow: hidden;
  }
  .music-name span{
    display: inline-block;
    animation: scroll 5s linear infinite;
  }
  .music-name span::after{
    content: attr(data-text);
    margin-left: 40px;
  }
  @keyframes scroll {
    from{
      transform: translateX(0);
    }
    to{
      transform: translateX(calc(-50% - 20px));
    }
  }
</style>